<template>
    <div class="table_div">
        <div class="search_area" :style="{display: searchBtn}">
            <slot name="searchArea"></slot>
        </div>
        <div class="list_table">
            <el-table ref="table" v-loading="loading"
                      :data="dataList"
                      :height="height"
					  :row-key="tableId"
                      :tree-props="{children: childrenName}"
                      border
                      cell-class-name="cell_table"
                      class="table_grid"
                      element-loading-text="列表刷新中"
                      highlight-current-row
                      style="width: 100%;"
                      @select="handleSelectChange"
                      @select-all="handleSelectChange"
            >
                <el-table-column v-if="showExpand" type="expand">
                    <template v-if="showExpand" #default="scope">
                        <slot :index="scope.$index" :row="scope.row" name="expandContent"></slot>
                    </template>
                </el-table-column>
                <el-table-column v-if="showSelect" type="selection" width="40" fixed/>
                <el-table-column v-if="showIndex" align="center" label="序号" type="index" width="50"/>
                <el-table-column v-for="item in tableConfig" v-bind:key="item.id" :align="item.align"
                                 :label="item.label" :min-width="item.minWidth" :prop="item.prop"
                                 :width="item.width">
                    <template v-if="item.slot" #default="scope">
                        <slot :index="scope.$index" :name="'item_' + item.prop" :row="scope.row" :rowinfo="item"></slot>
                    </template>
                </el-table-column>
                <el-table-column v-if="showOperate" :width="operateWidth" label="操作" fixed="right">
                    <template v-if="showOperate" #default="scope">
                        <slot :index="scope.$index" :row="scope.row" name="operateContent"></slot>
                    </template>
                </el-table-column>
            </el-table>
            <pagination v-if="showPage" :current-page="currentPage" :layout="layout" :page-size="pageSize"
                        :total="total" @currentChange="handleCurrentChange">
            </pagination>
        </div>
    </div>
</template>

<script>
import Pagination from "@/components/pagination/pagination";

export default {
    name: "pageList",
    components: {Pagination},
    props: {
        tableConfig: Array,
        dataList: Array,
        childrenName: {
            type: String,
            default: "childList"
        },
        tableId: {
            type: String,
            default: "id"
        },
        loading: Boolean,
        height: {
            type: String | Number,
            default: '500px',
        },
        showExpand: Boolean,//扩展区域
        showIndex: Boolean,//行号相关
		operateFixed: Boolean,//操作栏是否固定
        showSelect: Boolean,//是否显示复选框
        selectable: {
            type: Function,
            default: () => {
            }
        },
		showOperate: Boolean,//是否显示分页
		operateWidth: {//操作栏宽度
			type: String,
			default: '60px'
		},
        showPage: Boolean,//是否显示分页
        currentPage: {
            type: Number,
            default: 1
        },
        total: {
            type: Number,
            default: 0
        },
        pageSize: {
            type: Number,
            default: 20
        },
        layout: {
            type: String,
            default: "total, prev, pager, next"
        },
		searchBtn: {
			type: String,
			default: 'block',
		}
    },
    
    data() {
        return {
            selectIdList: [],
        }
    },
    methods: {
        handleSelectChange(val) {
            this.$emit("change", val);
        },
        handleCurrentChange(val) {
            this.$emit("currentChange", val);
        },
    }
}
</script>

<style scoped>

</style>